<template>
  <a-card :bordered="false" title="业务列表">
    <template #extra>
      <a-space size="small">
        <a-input v-model:value="etlName" placeholder="请输入业务名称" />
        <a-button type="primary" @click="filterEtl">过滤</a-button>
        <a-button type="primary" @click="$emit('showEtlEditTable', {})">添加</a-button>
      </a-space>
    </template>
    <a-table
      class="ant-table-striped"
      :data-source="dataSource"
      :columns="columns"
      :row-key="recode => recode.id"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      bordered
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <a-space size="small">
            <a-popconfirm :title="'确定要立即执行【' + record.etlName + '】吗？'" @confirm="triggerEtl(record)">
              <a-button type="primary" danger size="small">执行</a-button>
            </a-popconfirm>
            <a-button type="primary" size="small" @click="$emit('showEtlEditTable', record)">编辑</a-button>
            <a-popconfirm :title="'确定要删除【' + record.etlName + '】吗？'" @confirm="deleteEtl(record)">
              <a-button type="primary" size="small" class="button-warning-disable">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue';

defineEmits<{
  (e: 'showEtlEditTable', editEtl?: object): void;
}>();

let dataSource = ref([]);

//搜索的etlName
let etlName = ref();

//搜索过滤
function filterEtl() {
  if (!etlName.value) {
    return;
  }
  dataSource.value = dataSource.value.filter((item: any) => item.etlName.includes(etlName));
}

const columns = [
  {
    title: '#',
    customRender: (text: any) => text.index + 1,
  },
  {
    title: '业务ID',
    dataIndex: 'id',
  },
  {
    title: '业务名称',
    dataIndex: 'etlName',
  },
  {
    title: '创建时间',
    dataIndex: 'createDateTime',
  },
  {
    title: '更新时间',
    dataIndex: 'updateDateTime',
  },
  {
    title: '操作',
    key: 'operation',
  },
];

onBeforeMount(() => {
  etlList();
});

//获取列表
function etlList() {
  dataSource.value = [
    {
      id: '62e9c14d70b62d6520c09103',
      etlName: 'wxcomponet的OracleToMysql',
      fromDataSource: 'o2o-ds-slave',
      toDataSource: 'global-ds-master',
      etlConfig:
        '{"tableList":[{"toTable":{"toTableColumnList":["COMPONENT_APPID","COMPONENT_VERIFY_TICKET","COMPONENT_ACCESS_TOKEN","TICKET_UPDATA_DATE","ACCESS_TOKEN_UPDATA_DATE"],"afterSql":"","beforeSql":"","toTableName":"WX_COMPONENT"},"fromTable":{"querySql":"SELECT COMPONENT_APPID, COMPONENT_VERIFY_TICKET, COMPONENT_ACCESS_TOKEN, TICKET_UPDATA_DATE, ACCESS_TOKEN_UPDATA_DATE FROM WX_COMPONENT"}}],"config":{"batchSize":10000}}',
      createDateTime: '2022-08-03 08:29:01',
      updateDateTime: '2022-08-03 11:38:22',
    },
    {
      id: '62e9cdaa486a533a3e228053',
      etlName: '3',
      fromDataSource: 'o2o-ds-slave',
      toDataSource: 'global-ds-master',
      etlConfig: '{}',
      createDateTime: '2022-08-03 09:21:46',
      updateDateTime: '2022-08-03 09:21:46',
    },
    {
      id: '62e8fcb693a1a45d14301af9',
      etlName: '2',
      fromDataSource: '2',
      toDataSource: '2',
      etlConfig:
        '{"optimizeDeps":{"include":["@ant-design-vue/pro-layout","ant-design-vue/es","vue","vue-router","vuex"]}}',
      createDateTime: '2022-08-02 18:30:14',
      updateDateTime: '2022-08-03 08:36:45',
    },
  ];
}

function triggerEtl(currentEtl: object) {
  message.success('执行成功！');
}

function deleteEtl(currentEtl: object) {
  message.success('删除成功！');
}
</script>

<style lang="less" scoped>
.paddingTop {
  margin-top: 30px;
}

.button-warning-disable {
  background-color: #faad14;
  border-color: #faad14;
}

.button-warning-enable {
  background-color: #52c41a;
  border-color: #52c41a;
}

.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>
